---
title: Tooltip
description:
  Used to display additional information when a user hovers over an element.
links:
  source: components/tooltip
  storybook: components-tooltip--basic
  recipe: tooltip
  ark: https://ark-ui.com/react/docs/components/tooltip
---

<ExampleTabs name="tooltip-basic" />

## Setup

For ease of use, create a closed component composition for the `Tooltip`
component.

<SnippetCode name="tooltip" />

Alternatively, you can add it to your project using the following command.

```sh
npx @chakra-ui/cli snippet add tooltip
```

## Usage

```jsx
import { Tooltip } from "@/components/ui/tooltip"
```

```jsx
<Tooltip content="...">
  <button />
</Tooltip>
```

## Examples

### Arrow

Use the `showArrow` prop to show an arrow on the tooltip.

<ExampleTabs name="tooltip-with-arrow" />

### Placement

Use the `positioning.placement` prop to change the position of the tooltip.

<ExampleTabs name="tooltip-with-placement" />

### Offset

Use the `positioning.offset` prop to change the offset of the tooltip.

<ExampleTabs name="tooltip-with-offset" />

### Delay

Use the `openDelay` and `closeDelay` prop to change the delay of the tooltip.

<ExampleTabs name="tooltip-with-delay" />

### Custom Background

Use the `--tooltip-bg` CSS variable to change the background color of the
tooltip.

<ExampleTabs name="tooltip-with-custom-bg" />

### Controlled

Use the `open` and `onOpenChange` prop to control the visibility of the tooltip.

<ExampleTabs name="tooltip-controlled" />

### Store

An alternative way to control the tooltip is to use the `RootProvider` component
and the `useTooltip` store hook.

This way you can access the tooltip state and methods from outside the tooltip.

<ExampleTabs name="tooltip-with-store" />

### Interactive

Use the `interactive` prop to keep the tooltip open when interacting with its
content.

<ExampleTabs name="tooltip-with-interactive" />

### Disabled

Use the `disabled` prop to disable the tooltip. When disabled, the tooltip will
not be shown.

<ExampleTabs name="tooltip-with-disabled" />

### With Avatar

Here's an example of how to use the `Tooltip` component with an `Avatar`
component.

<ExampleTabs name="tooltip-with-avatar" />

### With Checkbox

Here's an example of how to use the `Tooltip` component with a `Checkbox`
component.

<ExampleTabs name="tooltip-with-checkbox" />

### With MenuItem

Here's an example of how to use the `Tooltip` with a `MenuItem` component.

<ExampleTabs name="tooltip-with-menu-item" />

### With MenuTrigger

Here's an example of how to use the `Tooltip` with a `MenuTrigger` component.

<ExampleTabs name="tooltip-with-menu-trigger" />

### With Switch

Here's an example of how to wrap `Tooltip` around a `Switch` component.

<ExampleTabs name="tooltip-with-switch" />

### With Tabs

Here's an example of how to wrap `Tooltip` around a `Tabs` component.

<ExampleTabs name="tooltip-with-tab" />

## Props

### Root

<PropTable component="Tooltip" part="Root" />
